import { ReactElement, useState, useEffect } from 'react'
import { message, Button } from 'antd'
import { awaitWrap } from '@js/tool'
import { getPerformanceRequest } from './ajax'
import { PerformanceSchema } from '@components/schema/performanceSchema'
import Info from './components/info'
import Table from './components/table'
import style from './index.module.less'

async function initPerformance (id: string, setPerformance: (v: PerformanceSchema) => void): Promise<void> {
  const hide = message.loading('加载中', 120)
  const [e, d] = await awaitWrap(getPerformanceRequest(id))
  hide()
  if (e === null && d !== null) {
    setPerformance(d)
  }
}

interface Props {
  meta: {
    id: string
  }
}

function Main ({meta}: Props): ReactElement {
  const [performance, setPerformance] = useState<PerformanceSchema | null>(null)
  useEffect(() => {
    if (typeof meta.id === 'string') {
      initPerformance(meta.id, setPerformance).catch(e => console.error(e))
    }
  }, [meta])
  return (
    <div className={style.container}>
      <Info data={performance} />
      <Table data={performance} />
    </div>
  )
}

export default Main
